import React from 'react';
import ReactDOM from 'react-dom';
/* 
  ref操作的3种方式
    ref='xxx'  this.refs.xxx  已废弃
    
    ref={el=>this.xxx = el}  this.xxx
    

    this.xxx = React.createRef()
    ref={this.xxx}   this.xxx.current 
*/
class App extends React.Component {
  state = {
    name: "珠峰",
    age: 13
  }
  aaa = React.createRef()
  changeName = (e) => {
    console.log(e.target.value)
    this.setState({
      name: e.target.value
    })
  }
  changeAge = (e) => {
    this.setState({
      age: e.target.value
    })
  }
  submit = () => {
    console.log(this.state.name, this.state.age)
    // console.log(this.refs.qqq.value)
    console.log(this.qqq.value)
    console.log(this.aaa.current.value)
  }
  render() {
    let { name, age } = this.state;
    return <div className=''>
      <h1>姓名是{name},年龄是{age}</h1>
      {/* 受控组件：表单的内容收组件的控制;非受控组件走的是原生操作DOM的思想  */}
      <input type="text" value={name} onChange={this.changeName} />
      <input type="number" value={age} onChange={this.changeAge} />
      <input type="text" placeholder='性别' ref={(el) => { this.qqq = el }} />
      <input type="text" placeholder='性别' ref={this.aaa} />
      <button onClick={this.submit}>submit</button>
    </div>;
  }
}

ReactDOM.render(<App />, document.getElementById('root'))